import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Radio} from 'element-react';
import IData from './personMsgData.js';

export class Gender extends Component {
    constructor(props) {
        super(props);

        this.state = {

            dialogVisible: false,
            value: IData.sex,
            value1: IData.sex
        };
    }
    onChange(value) {
        this.setState({ value });

    }
    testKeyDown(){
        this.setState({ dialogVisible: true })
        var _this=this
        document.onkeydown=function(event){
            if(event.keyCode=='13'){
                _this.changeValue();

                document.onkeydown=null
            }
        }
    }

    changeValue(){
        var value1=this.state.value;
        this.setState({ dialogVisible: false,value1 });
    }

    render() {
        return (
            <div className="zy1">
                <Button type="text" className="font" onClick={this.testKeyDown.bind(this)} >
                    <span>{this.state.value1}</span>
                    &nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                <Dialog
                    title="性别"
                    size="middle"
                    visible={ this.state.dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Radio value="男" checked={this.state.value === '男'} onChange={this.onChange.bind(this)} >男</Radio>
                        <Radio value="女" checked={this.state.value === '女'} onChange={this.onChange.bind(this)} >女</Radio>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button type="primary" onClick={ this.changeValue.bind(this) } >保存</Button>
                    </Dialog.Footer>
                </Dialog>
            </div>

        )
    }
}